<div id="notice_bank">
    <div class="notice_bank">
        <el-row type="flex" class="title_notice_bank">
            <el-col :span="24"><div>银行公告</div></el-col>
        </el-row>

        <!--公告表格-->
        <el-table
                size="mini"
                :data="tableData"
                @row-click="handleRowHandle"
                @cell-mouse-enter="mouseEnterEvent"
                align="center"
                style="width: 100%;text-align: center;">
            <el-table-column
                    align="center"
                    width="200"
                    prop="notifyType"
                    label="通知类型">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="200"
                    prop="createDate"
                    :formatter="formatterTime"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="200"
                    prop="orgName"
                    label="发起机构">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="auto"
                    prop="notifyContext"
                    style="overflow: hidden;"
                    label="通知内容">
            </el-table-column>
        </el-table>

        <!--分页-->
        <div class="footerBox">
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :current-page.sync="currentPage"
                    :total="totalCount">
            </el-pagination>
        </div>

        <!--详情弹出框-->
        <el-dialog class="dialogDetails" title="公告详情" :visible.sync="dialogBankNoticeInfoVisible">
            <div class="info-template-content">
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">通知类型</el-col>
                    <el-col :span="19" style="color: #333">{{bankNoticeInfo.notifyType}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">创建时间</el-col>
                    <el-col :span="19" style="color: #333">{{bankNoticeInfo.createDate}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">发起机构</el-col>
                    <el-col :span="19" style="color: #333">{{bankNoticeInfo.orgName}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">通知内容</el-col>
                    <el-col :span="19" style="color: #333">{{bankNoticeInfo.notifyContext}}</el-col>
                </el-row>
            </div>
        </el-dialog>

    </div>
</div>
<!--[if IE]>
<script>
    goIEPage(IEVersion(),'${basePath}/noticeBankIE9');
</script>
<![endif]-->
<script>

    var notice_bank =
        new Vue({
            el: "#notice_bank",
            data: {
                bankNoticeInfo:{},// 银行公告详情
                labelPosition:'left',
                tableData: [],// 表格信息
                // 分页
                currentPage: 1,
                totalCount:'',
                totalPage:'',
                parameters:{
                    'currentPage':'',
                },
                dialogBankNoticeInfoVisible:false,// 显示详情
            },
            methods: {
                mouseEnterEvent: function(row, event, column){
                    if(event.label == '操作'){
                        column.style.cursor="default"
                    }
                    if(event.label != '操作'){
                        column.style.cursor="pointer"
                    }
                },
                // 分页加载数据
                handleCurrentChange: function(currentPage){
                    Pagesearch(this,'${basePath}merchant/notice/getBankNotifyListPage1', this.parameters,currentPage,
                        function (resData) {
                            if(resData.status == 'success') {

                            }
                        });
                },
                // 详情
                handleRowHandle:function (row) {
                    console.log(row)
                    notice_bank.dialogBankNoticeInfoVisible = true;
                    row.createDate = new Date(row.createDate).Format('yyyy-MM-dd hh:mm:ss');
                    notice_bank.bankNoticeInfo = row;
                },
                // 时间转换
                formatterTime: function (row) {
                    return new Date(row.createDate).Format('yyyy-MM-dd hh:mm:ss');
                },
            },
            created: function () {
                // 从后台获取请求数据的URL
                Pagesearch(this,'${basePath}merchant/notice/getBankNotifyListPage1', null,1,function (resData) {
                    if(resData.status == 'success'){
                        // 成功后的callback
                        if(resData.status == 'success'){
                            resData.t.forEach(function (item) {
//                                item.startDate = new Date(item.startDate).Format('yyyy-MM-dd');
//                                item.endDate = new Date(item.endDate).Format('yyyy-MM-dd');
                                if(item.notifyType == '03'){
                                    item.notifyType = '系統通知';
                                }
                            });
                        }

                    }
                });
            }
        });
</script>

<style scoped>
    .notice_bank .title_notice_bank{
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 10px;
        color: #333333;
        background: #ffffff;
    }
    .notice_bank .footerBox{
        width: 100%;
        height: 50px;
        text-align: right;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
    }
    .el-dialog__body{
        padding: 40px 0 40px 100px;
    }
    .el-dialog__header span {
        padding-left: 20px;
    }
    .el-dialog__headerbtn .el-dialog__close {
        color: #aaa;
        font-size: 22px;
    }
    .dialogDetails .el-dialog {
        overflow: hidden;
        -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        box-shadow: 0 0 16px rgba(0,0,0,0.5);
    }
    .el-dialog__header {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,68,68,1);
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }
    .el-dialog__body {
        padding-top: 75px;
    }
    .dialogDetails .el-dialog__body {
        padding: 50px 0 0 0;
    }
    .dialogDetails .info-template-content .el-row:nth-child(even) {
        background-color: #efefef;
    }
    .dialogDetails .item-row {
        height: 46px;
        line-height: 46px;
        font-size: 16px;
        padding-left: 60px;
    }
    .dialogDetails .item-row div:first-of-type {
        color: #666;
        text-align: left;
    }
    .dialogDetails .item-row div:last-of-type {
        color: #333;
        padding-right: 10px;
    }
    .dialogDetails .info-template-content .el-row:last-of-type {
        margin-bottom: 30px;
    }
</style>
